<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册</title>
	<style>
    *{
    margin:0;
    padding:0;
    }
	body{
	min-width: 1100px;
	min-height:400px;
	background:#F98A53;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1
	}
	#regis_Panel{
	width:422px;
	height:550px;
	background:url(img/bg.jpg);
	margin:0 auto;
	margin-top:30px; 
	overflow: hidden;
	text-align: center;
	}
	#logo_Panel{
	width:48px;
	height:48px;
	margin:0 auto;
	margin-top:50px;
	}
	#email{
	width:280px;
	height:32px;
	margin-top:50px;
	padding-left: 10px;
	}
	#password{
	width:280px;
	height:32px;
	margin-top:20px;
	padding-left: 10px;
	}
	#verify-code{
	width:280px;
	height:32px;
	margin-top:20px;
	padding-left: 10px;
	}
	#register{
	width:280px;
	height:40px;
	margin: 0 auto;
	margin-top: 50px;
	background-color: #f9671e;
	color:#fff;
	font-size: 16px;
	border: solid 3px #f9671e;
	border-radius: 10px;
	outline:none;
	}
	#register:hover{
	background:none;
	cursor:pointer;
	}
	#login_Panel{
	margin: 0 auto;
	width:320px;
	text-align: left;
	margin-top: 20px;
	color:grey;
	font-size: 14px;
	}
	#login{
	text-decoration: none;
	color: #0000CD;
	}
	#tip1{
	width:280px;
	height:12px;
	font-size: 12px;
	color: red;
	float: left;
	margin-left: 64px;
	margin-top:5px;
	text-align: left;
	}
	#tip2{
	width:280px;
	height:12px;
	font-size: 12px;
	color: red;
	float: left;
	margin-left: 64px;
	margin-top:5px;
	text-align: left;
	}
	#tip3{
	width:280px;
	height:12px;
	font-size: 12px;
	color: red;
	float: left;
	margin-left: 64px;
	margin-top:5px;
	text-align: left;
	}
	#mengban{
	width:100%;
	position:fixed;  
	background:#000;  
	z-index:998;
	top:0;  
	left:0;  
	height:1000px;
	opacity:0.6; 
	display: none;
	}
	#msg{
	width:330px;
	height:200px;
	position: absolute;
	z-index:999;
	top: 40%;
	margin-top:-80px;
	left:47.5%;
	margin-left:-133px;
	background:#fff;
	font-size:17px;
	color:#666;
	border:1px solid #f8f8f8;
	text-align: center;
	line-height: 2rem;
	display:inline-block;
	padding-top: 20px;
	padding-bottom:20px;
	border-radius:2px;
	background:white;
	display: none;
	}

	</style>
</head>
<body>
<div id="mengban"></div>
<div id="msg">
	<img src="img/success.png">
	<p>注册成功<p>
	<input type="button" style="width: 70px;height: 35px;border-radius: 5px;background: #436EEE;border:1px solid #436EEE;cursor: pointer;" value="OK" onclick="return backto()">
</div>
<div id="regis_Panel">
<div id="logo_Panel"><img src="img/regis.png"></div>
<form class="demoform">
	<input type="text" name="email" id="email" placeholder="邮箱地址" required=""  />
	<div id="tip1"></div>
	<input type="password" name="password" id="password" placeholder="密码(字母、数字、6-16位)" />
	<div id="tip2"></div>
	<input type="password" name="confirm_Pwd" id="verify-code" placeholder="验证码" required=""  />
	<div id="tip3"></div>
	<div style="clear:both"></div>
	<input type="submit" name="register" id="register" value="注册" onclick = "return check()"/>
</form>
<div id="login_Panel">
		已有帐号<a href="login.html" title="登录" target="" id="login">立即登录</a>
	</div>
</div>
</body>
<script>
    var email = document.getElementById('email');
	var pwd = document.getElementById('password');
	var verifycode = document.getElementById('verify-code');
	var tip1 = document.getElementById('tip1');
	var tip2 = document.getElementById('tip2');
	var tip3 = document.getElementById('tip3');
    var emailreg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ ;
    var pwdreg = /^[a-zA-Z0-9]{6,16}$/;
    
  function check(){
    if(!email.value){tip1.innerHTML = "*请输入用于登录的邮箱地址";}
    else{
    if(!emailreg.test(email.value)){tip1.innerHTML = "*请输入正确的邮箱地址";}
    else{
    if(!pwd.value){tip2.innerHTML = "*请输入密码";}
    else{
    if(!pwdreg.test(pwd.value)){tip2.innerHTML = "*密码包含数字，字母，6-16位";}
    else{
    if(!verifycode.value){tip3.innerHTML = "*请输入验证码";}
    else{if(verifycode.value != "1234"){tip3.innerHTML = "*验证码错误";}}
    }
    }
    }
    }
    return false;
}

    
    email.onblur = function(){
    if(!email.value){tip1.innerHTML = "*请输入用于登录的邮箱地址";}
    else{
    if(!emailreg.test(email.value)){tip1.innerHTML = "*请输入正确的邮箱地址";}
    else{
    if(!verifycode.value){tip3.innerHTML = "*请输入验证码";}
    else{if(verifycode.value != "1234"){tip3.innerHTML = "*验证码错误";}}
    }
    }
    
    }
    
    pwd.onblur = function(){
    if(!pwd.value){tip2.innerHTML = "*请输入密码";}
    else{
    if(!pwdreg.test(pwd.value)){tip2.innerHTML = "*密码包含数字，字母，6-16位";}
    else{tip2.innerHTML = "";}
    }
    }
    
    verifycode.onblur = function(){
    if(!verifycode.value){tip3.innerHTML = "*请输入验证码";}
    else{
    if(verifycode.value != "1234"){tip3.innerHTML = "*验证码错误"}
    else{tip3.innerHTML = "";}
    }
    }
    
    function backto(){
    location.reload(false);
    }
</script>
</html>